<template>
	<div style="height:100%">
		<cl-crud @load="onLoad">
			<template #slot-select>
				<div style="margin:0 20px">
					<el-select
						size="mini"
						filterable
						v-model="select.redPacket"
						placeholder="筛选类型"
						style="margin-right: 10px;width:100px;"
						@change="val => crud.refresh({ scene: val, page: 1 })"
					>
						<el-option label="全部" value=""></el-option>
						<el-option label="额外奖励" value="0"></el-option>
						<el-option label="签到" value="1"></el-option>
						<el-option label="金币任务" value="2"></el-option>
						<el-option label="金币兑现" value="3"></el-option>
						<el-option label="阶段奖励" value="4"></el-option>
						<el-option label="兑换商品" value="5"></el-option>
						<el-option label="额外奖励收入" value="6"></el-option>
						<el-option label="新用户奖励" value="7"></el-option>

					</el-select>
				</div>
				<date-picker
					@change="val => crud.refresh({ startTime: val[0], endTime: val[1], page: 1 })"
					@refresh="crud.refresh({ startTime: '', endTime: '', page: 1 })"
				></date-picker>
			</template>
			<template #table-column-scene="{scope}">
				{{ scope.row.scene | redPack_type }}
			</template>
			<template #table-column-sceneType="{scope}">
				<span v-if="scope.row.scene == 3 || scope.row.scene == 5">支出</span>
				<span v-else>收入</span>
			</template>
			<template #table-column-createTime="{scope}">
				{{ scope.row.createTime | date_format }}
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';
import moment from 'moment';

export default {
	data() {
		return {
			select: {
				crud: null,
				redPacket: ''
			}
		};
	},
	components: {
		DatePicker
	},
	mounted() {},

	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.integralMall.bwbtGold)
				.set('table', {
					columns: [
						{
							prop: 'nickName',
							label: '用户名',
							align: 'center'
						},
						{
							prop: 'phone',
							label: '手机账号',
							align: 'center'
						},
						{
							prop: 'scene',
							label: '场景',
							align: 'center'
						},
						{
							prop: 'sceneType',
							label: '收入/支出',
							align: 'center'
						},
						{
							prop: 'gold',
							label: '金币数',
							align: 'center',
							sortable: 'custom'
						},
						{
							prop: 'createTime',
							label: '时间',
							align: 'center',
							sortable: 'custom'
						}
					],
					op: {
						visible: false
					}
				})

				.set('layout', [
					['refresh-btn', 'slot-select', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();
			app.refresh({
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			});
		}
	}
};
</script>
<style lang="scss" scoped></style>
